<app-left-line
    [text]="'费用查询'"
  ></app-left-line>

<div class="fee-bill my-list">
  <div class="my-list-header">
    <span class="usageCode">用户编号: {{ usageCode }}</span>
    <span class="address">{{address}}</span>
  </div>

  <div class="content">
    <nz-table #smallTable nzSize="small" nzBordered
      [nzData]="tableData"
      [nzLoading]="dataLoading"
      [nzShowPagination]="false"
    >
      <thead>
        <tr>
          <th>序号</th>
          <th *ngFor="let col of cols | dealObj: 'value'">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of smallTable.data; let i = index">
          <td>{{ i + 1 }}</td>
          <td>{{ data['month'] }}</td>
          <td>{{ data['num'] }}</td>
          <td [nzAlign]="'right'">{{ data['amount'] }}</td>
          <td [nzAlign]="'right'">{{ data['sewageAmount'] }}</td>
          <td [nzAlign]="'right'">{{ data['garbageFees'] }}</td>
          <td [nzAlign]="'right'">{{ data['total'] }}</td>
          <!-- <td>
            <nz-tag [nzColor]="state[data['state']]?.color">
              {{ state[data['state']]?.value }}
              {{ data['lockNote'] ? ': '+data['lockNote'] : '' }}
            </nz-tag>
          </td> -->
          <td>
            <button nz-button nzType="link" (click)="eBill(data)">电子账单</button>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  <div class="my-pagination">
    <nz-pagination [nzTotal]="total" nzShowSizeChanger 
      [(nzPageSize)]="pageSize"
      [(nzPageIndex)]="pageNumber"
      (nzPageSizeChange)="getFeeBill()"
      (nzPageIndexChange)="getFeeBill()"
    >
    </nz-pagination>
  </div>
</div>

<app-pdf-preview [pdfUrl]="billUrl"  [(nzVisible)]="billModal"
  [title]="'电子账单'"
  [okBtnText]="'下载'"
  (onOkBtn)="downBill()"
  [btnLoading]="btnLoading"
></app-pdf-preview>